<template>
  <div class="body">
    <div class="header">
      <header-com :backable="false" :showUser="true">
        <template v-slot:formName>
          表单名称
        </template>
      </header-com>
    </div>
    <div class="container">
      <div class="main">
        <form-com :formID="formId" v-if="true"></form-com>
      </div>
      <div class="form-footer">
        <p>
          <span class="logo"></span>
          由
          <span class="src-common">金山文档</span>
          旗下表单提供服务
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import formCom from '@/views/write/FormCom.vue';
import {useRoute} from "vue-router";

export default defineComponent({
  name: 'write-com',
  components: {
    formCom,
  },
  setup() {
    const route = useRoute();
    let formId = route.params.id;
    return {
      formId
    }
  }
})

</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100vh;
  background-color: #f2f4f7;


  @media only screen and (min-width: 661px) {
    .main {
      margin-top: 16px;
    }
    .form-footer {
      display: none;
    }
  }
  @media only screen and (max-width: 660px) {
    .main {
      height: 100%;
    }
    .header {
      display: none;
    }
    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .form-footer {
        width: 100%;
        bottom: 0;
        font-size: 12px;
        color: #9b9b9b;
        line-height: 8.5px;
        text-align: center;
        background: #f5f5f5;
        font-weight: 400;
        padding: 15px 0 calc(8px + env(safe-area-inset-bottom) / 2);
        flex-shrink: 0;
        cursor: pointer;

        p {
          margin-bottom: 7px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0;

          .logo {
            background: url() no-repeat;
            background-size: auto;
            width: 16px;
            height: 16px;
            -webkit-background-size: cover;
            background-size: cover;
            display: inline-block;
            margin-right: 9px;
          }

          .src-common {
            color: #3692f5;
            // border-bottom: 1px #3692f5 solid;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
